<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 表单输入数据绑定</title>
</head>
<body>
<div id="app">

    <template>
        <label>
            张三
            <input type="checkbox" v-model="checkbox" value="张三">
        </label>
        <label>
            李四
            <input type="checkbox" v-model="checkbox" value="李四">
        </label>
        <label>
            王五
            <input type="checkbox" v-model="checkbox" value="王五">
        </label>
        <br>
        {{checkbox}}

        <form>
            <label>
                男
                <input value="true" type="radio" v-model="radio">
            </label>
            <label>
                女
                <input value="false" type="radio" v-model="radio">
            </label>
            {{radio}}
        </form>

        <form>
            <label>
                <select v-model="select">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </label>
            {{select}}
        </form>
    </template>
</div>

<script src="../js/vue.js"></script>
<script>

    const message = {
        checkbox:[],
        radio: true,
        select : [],
    };

    //数据冻结, 禁止调试
    //Object.freeze(message)

    const demo = new Vue({
        el: '#app',
        data: message,
        methods: {

        },
        computed: {}
    });
</script>
</body>
</html>